<template>
  <div class="user-editor">
    <Form
      :model="formInfo"
      ref="formRole"
      class="ivu-form-no-margin-bottom"
      :rules="rules"
      :disabled="disabled"
      :label-width="172"
    >
      <Row :gutter="20" class="code-row-bg">
        <Col span="24" style="border: none;">
          <Form-item prop="crsrmReporterLdap" label="报送人账号">
            <Input
              placeholder
              size="small"
              v-model.trim="formInfo.crsrmReporterLdap"
              :maxlength="80"
              style="width: 100%;"
            ></Input>
          </Form-item>
        </Col>
        <Col span="24" style="border: none;">
          <Form-item prop="crsrmReporterName" label="报送人姓名">
            <Input
              placeholder
              size="small"
              v-model="formInfo.crsrmReporterName"
              :maxlength="80"
              style="width: 100%;"
            ></Input>
          </Form-item>
        </Col>
        <Col span="24" style="border: none;">
          <Form-item prop="crsrmPurchaserSbu" label="采购人所属一级利润中心" required>
            <Select v-model="formInfo.crsrmPurchaserSbu" multiple style="width: 100%" @on-change="changeHandle">
              <Option v-for="item in crsrm_purchaser_sbu" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Form-item>
        </Col>
        <Col span="24" style="border: none;">
          <Form-item prop="userType" label="用户类型" required>
            <Select v-model="formInfo.userType" multiple style="width: 100%">
              <Option v-for="item in crsrm_user_type" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Form-item>
        </Col>
      </Row>
      <!-- 备注 改为 描述 -->
      <Form-item label="描述">
        <Input
          placeholder
          type="textarea"
          :rows="2"
          size="small"
          v-model="formInfo.describes"
          :maxlength="200"
          style="width: 100%;"
        ></Input>
      </Form-item>
      <Form-item label="备注">
        <Input
          placeholder
          type="textarea"
          :rows="2"
          size="small"
          v-model="formInfo.remark"
          :maxlength="200"
          style="width: 100%;"
        ></Input>
      </Form-item>
    </Form>
  </div>
</template>

<script>
import { mixin } from "@/views/superviseInfo/mix/mixin";
import { superviseInfoAPI } from "@api/superviseInfo";
export default {
  name: "userEditor",
  mixins: [mixin],
  props: {
    handleType: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: ''
    }
  },
  computed: {
    userTypeList: () => this.$store.state.sasspWeb.stateObj.userType,
    disabled() {
      return this.handleType === 'detail'
    }
  },
  data() {
    let validateSbu = (value, rule, callback) => {
      if (!this.formInfo.crsrmPurchaserSbu.length) {
        return callback(new Error('请选择采购人所属一级利润中心'))
      }
      callback()
    }
    let vlaidateUserType = (value, rule, callback) => {
      if (!this.formInfo.userType.length) {
        return callback(new Error('请选择用户类型'))
      }
      callback()
    }
    return {
      formInfo: {
        userType: '',
        crsrmPurchaserSbu: '',
        crsrmPurchaserName: '',
        crsrmReporterLdap: '',
        crsrmReporterName: '',
        describes: '',
        remark: ''
      },
      rules: {
        crsrmReporterLdap: [
          { required: true, message: '请输入采购人LDAP账号', trigger: 'blur' }
        ],
        crsrmReporterName: [
          { required: true, message: '请输入采购人姓名', trigger: 'blur' }
        ],
        crsrmPurchaserSbu: [
          { validator: validateSbu, trigger: 'change' }
        ],
        userType: [
          { validator: vlaidateUserType, trigger: 'change' }
        ]
      },
      actions: [
        {
          text: "确定",
          theme: 'primary',
          handle: () => {
            this.submit()
          }
        },
        {
          text: "取消",
          handle: () => {
            this.$emit('Close')
          }
        },
      ],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let title = ''
      if (this.handleType !== 'add') {
        this.getDetail()
        title = '新增'
      }
      if (this.handleType === 'detail') {
        this.actions.shift()
        title = '编辑'
      }
      this.$emit('SetPageActions', this.actions)
      this.$emit('SetTitle', title + '用户')
      this.$emit("SetPageWidth", 730);
    },
    getDetail() {
      superviseInfoAPI.purviewDetail({ id: this.id }).then(res => {
        this.formInfo = res.data
        this.formInfo.userType = res.data.userType.toString().split( ",");
        this.formInfo.crsrmPurchaserSbu = res.data.crsrmPurchaserSbu.toString().split( ",");
      })
    },
    submit() {
      //深拷贝，转为逗号隔开
      this.$refs.formRole.validate((valid) => {
        if (valid) {
          let purviewRequest = JSON.parse(JSON.stringify(this.formInfo));
          if(purviewRequest.crsrmPurchaserSbu && purviewRequest.crsrmPurchaserSbu instanceof Array){
            purviewRequest.crsrmPurchaserSbu = purviewRequest.crsrmPurchaserSbu.toString();
          }
          if(purviewRequest.userType && purviewRequest.userType instanceof Array){
            purviewRequest.userType = purviewRequest.userType.toString();
          }

          if (this.handleType === 'add') {
            superviseInfoAPI.addPurview(purviewRequest).then(res => {
              if (res.data.code === '-1') {
                this.$message.error(res.data.message)
              } else {
                this.$message.success('操作成功')
                this.$emit('Close')
              }
            })
          } else {
            superviseInfoAPI.editPurview(purviewRequest).then(res => {
              this.$message.success('操作成功')
              this.$emit('Close')
            })
          }
        }
      })
    },
    changeHandle(e) {
      let crsrmPurchaserName = [];
      let crsrmPurchaserSbu = this.formInfo.crsrmPurchaserSbu;
      this.crsrm_purchaser_sbu.forEach(v=>{
        if(crsrmPurchaserSbu.indexOf(v.value) !== -1){
          crsrmPurchaserName.push(v.label);
        }
      })
       this.formInfo.crsrmPurchaserName = crsrmPurchaserName.toString();
    },
  }
};
</script>

<style scoped>

</style>
